let _Vue = null;
const _history = 'history';
const _hash = 'hash';
/* eslint-disable */ 
export default class MyRouter {
    static install (Vue) {
        // 1. 判断当前插件是被安装
        if(MyRouter.install.installed){
            return;
        }
        MyRouter.install.installed = true;
        // 2. 把Vue构造函数记录到全局变量
        _Vue = Vue;
        // 3. 把创建Vue实例时候传入的router对象注入到Vue实例上
        
        
        //混入
        _Vue.mixin({
            beforeCreate(){
                if(this.$options.router){
                    //因为直接在install方法中赋值 this指向不对 所以需要混入
                    _Vue.prototype.$router = this.$options.router;
                    this.$options.router.init();
                }
            }
        })
    }

    constructor (options) {
        this.options = options;
        this.routerMap = {};
        this.data = _Vue.observable({
            current: '/'
        })
    }

    init () {
        this.createRouterMap();
        this.initComponents(_Vue);
        this.initEvent();
        this.initGetCurrentSet();
    }

    createRouterMap () {
        //遍历所有的路由规则，把路由规则解析成键值对的形式， 存储到routerMap中
        this.options.routes.forEach(router => {
            this.routerMap[router.path] = router.component;
        });
    }


    initComponents (Vue) {
        //因为render函数的this不再是当前vue实例对象所以需要定义self 来存放this
        const self = this;
        //创建router-link组件
        Vue.component('router-link', {
            props:{
                to: String
            },
            render(h){
                let obj = {
                    attrs:{
                        href: this.to
                    },
                    on:{
                        click: null,
                    }
                }

                
                if(self.options.mode == _history){
                    obj.on.click = this._historyHandler
                }
                if(self.options.mode == _hash){
                    obj.on.click = this._hashHandler
                }

                return h('a',obj, [this.$slots.default])
                //接收三个参数 
                //第一个参数 是我们要创建的元素对应的的选择器
                //第二个参数 给标签设置属性
                //第三个参数 生成的标签的内容
                
            },
            methods:{
                _historyHandler(e){
                    history.pushState({},'',this.to)
                    this.$router.data.current = this.to
                    e.preventDefault()
                },
                _hashHandler (e){
                    window.location.href="#"+this.to;
                    this.$router.data.current = this.to
                    e.preventDefault()
                }
            }
        });
        //创建router-view组件 需要找到当前路径然后渲染到 router-view位置
        Vue.component('router-view', {
            props:{
                to: String
            },
            render(h){
                const component = self.routerMap[self.data.current];
                console.log(self.data.current)
                return h(component);
                //接收三个参数 
                //第一个参数 是我们要创建的元素对应的的选择器
                //第二个参数 给标签设置属性
                //第三个参数 生成的标签的内容
            }
        });

    }


    initEvent(){
        if(this.options.mode == _history){
            window.addEventListener('popstate',() => {
                this.data.current = window.location.pathname;
            })
        }
        if(this.options.mode == _hash){
            window.addEventListener('hashchange',() => {
                this.data.current = window.location.hash.replace("#","")
                console.log(this)
            })
        }
        
      
        
    }

    initGetCurrentSet(){
        if(this.options.mode == _history){
            this.data.current = window.location.pathname;
        }
        if(this.options.mode == _hash){
            this.data.current = window.location.hash.replace("#","")
        }
    }
}

/* eslint-disable */ 